<template>
  <div class="text-center bg-[none]" :class="{
    'mb-[30px]!': !content && !$slots.content
  }" v-if="title || content || $slots.title || $slots.content">
    <h1 class="font-avenir text-xl text-center mb-3! bg-[none]! md:text-[29px]" v-if="title || $slots.title">
      <slot name="title">
        {{ title }}
      </slot>
    </h1>
    <div class="text-[15px] text-gray-500 bg-[none]! md:max-w-[650px]! mx-auto" v-if="content || $slots.content">
      <slot name="other"></slot>
      <slot name="content">
        {{ content }}
      </slot>
      <slot name="contentBottom"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
const { data } = await useFetch('/api/test')
defineProps<{
  title?: string
  content?: string
}>()
</script>